/******************************************************************************************
 * Import
 ******************************************************************************************/

// module
import React, {Component} from 'react';
import {View} from 'react-native';
import { Tabs, Button, Toast, Icon  } from 'antd-mobile-rn';

// project
import {
    CAround, CBetween, CCenter, CColumn, CHand, CItemX, CItemY, CLine, CRow, CWrap, 
    CIcon, CImage, CSvg, CText,
    CContent, CFloat, CFooter, CHeader, CPage, CSide, 
    CEmpty, CError, CFail, CSkeleton, 
    CLabel, CButton
} from '../../../library/comp';

import Licon from '../../../library/comp/project/icon';


/******************************************************************************************
 * Export Class
 ******************************************************************************************/

export default class ServiceGateway extends Component {

	/*------------------------------------------------------------------------------------
	 * 初始化
	 *-----------------------------------------------------------------------------------*/
	constructor(props){
		super(props)
		// this.Nav = this.props.navigation;

		/**
		 * state
		 */
		this.state = {
			// 页面tab切换
			tabs:[
				{title:'小区门禁'},
				{title:'楼宇门禁'}
			]
		}

    }

	/*------------------------------------------------------------------------------------
	 * 自定义方法
	 *-----------------------------------------------------------------------------------*/
	/**
	 * 一键开门
	 */
	open(){
		Toast.loading('正在开门',5)
	}

	/*------------------------------------------------------------------------------------
	 * 渲染
	 *-----------------------------------------------------------------------------------*/
	render() {
		const style = {
			borderBottomColor:'#26c75e',
			borderBottomWidth:3,
		}
		return (
			<CPage>

				<CContent mt='80' bg='#efeff4'>
					<View style={{
						paddingTop: 10,
						paddingBottom: 20,
						paddingLeft: 10,
						paddingRight: 10,
						backgroundColor: '#fff',
						marginTop: 20,
						marginLeft: 15,
						marginRight: 15,
						borderRadius: 4
					}}>

						{/* 页面tab切换 */}
						<Tabs 
							tabs={this.state.tabs} 
							tabBarUnderlineStyle={style} 
							tabBarActiveTextColor='#26c75e'
							tabBarTextStyle={{ size:16 }}
						>
							{/* 小区门禁 */}
							<View style={{backgroundColor:'#fff',marginLeft:30,marginRight:30,marginTop:30,borderTopRightRadius:5,borderTopLeftRadius:5}}>
								<View style={{padding:15}}>
									<CRow>
										<CText color='#999'>请您保持在门禁5米内的位置</CText>
									</CRow>

									{/* 选择小区 */}
									<CRow mt='60' mb='16' bb='2 #f0f0f0' pb='16'>
										<CHand f='4' y='center'>
											<CIcon width="18" height="18" color="#999" icon={ Licon["index-location"] }></CIcon>
											<CText size='32'> 保定珑城花园小区</CText>
										</CHand>
									</CRow>
								</View>

								{/* 一键开门按钮 */}
								<View style={{ marginTop:10 }}>
									<CHand  bg='#21ac43' x="center" y="center" ra='10' h='90' onClick={this.open}><CText size="32" bold color='#fff'>一键开门</CText></CHand>
								</View>
							</View>

							{/* 楼宇门 */}
							<CHand x='center' mt='40'><CText color='#666'>暂未开启此功能</CText></CHand>
						</Tabs>

					</View>

				</CContent>
				
                {/* 顶部 star */}
                <CHeader h='96' y='center' bg='#fff' style={{ borderBottomColor:"#eee", borderBottomWidth:1 }}>
                    <CBetween px='20'>
                        <CHand  onPress={(e)=> {
                            this.Nav.goBack()
                        }}>
                            <Icon type='left' size='md' color='#00CC66' />
                        </CHand>

                        <CText size='34'>一键开门</CText>
                        <CHand w='44' h='44'></CHand>
                    </CBetween>
                </CHeader>
                {/* 顶部 star */}

			</CPage>
		);
	}
}
